<template>
  <div class="nav-container">
    <div class="nav-item" v-for="(item,index) of data" :key="index">
      <a
        :style="'font-size:'+CfontSize"
        :class="(item.text==='首页' && currentIndex==='/v1/home')
        ||(currentIndex.indexOf(item.src) >= 0)? 'header-tag header-tag-on' : 'header-tag header-tag-blank'"
        :href="item.src"
        :target="(item.isblank === 'false') ? '':'_blank'"
        @click="cCurrentIndex(item.src,item)"
      >
        <i :class="'iconfont icon-'+item.icon" v-if="item.icon"></i>
        <span>{{item.text}}</span>
      </a>
      <div class="item-child" v-if="(currentIndex.indexOf(item.src) === 0)">
        <Menu :data="item.childrens" :currentIndex="currentIndex" :CfontSize="'14px'"></Menu>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive,toRefs} from 'vue'
export default {
    name: "Menu",
    props: {
        data: Array,
        CfontSize:{
            type: String,
            default:""
        },
        currentIndex: {
            type: String,
            default: ""
        },
    },
    setup(props, ctx) {
        const state = reactive({
            // currentMenuIndex: props.currentIndex,
        });
        const cCurrentIndex = (index,item) => {
            if(item.src && item.isblank === "false"){
                if(index !=="javascript:void(0);"){
                    sessionStorage.currentMenuIndex = index;
                    ctx.emit('cCurrentIndex', index)
                }
            }
        }

        return {
            ...toRefs(state),
            cCurrentIndex,
        }
    }
}
</script>

<style lang="scss" scoped>
.nav-container {
  .nav-item {
    float: left;
    height: 70px;

    .header-tag {
      display: block;
      padding: 0 20px;
      line-height: 70px;
      font-size: 16px;
      color: #a0a0a0;

      .icon-VIP {
        color: #dfba69;
      }
    }

    .header-tag-blank {
      &:hover {
        color: #494949;
      }
    }

    .header-tag-on {
      color: $ThemeColor;
    }

    .item-child {
      position: absolute;
      top: 71px;
      background-color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
